<!-- 常见头部布局 -->
<!-- 两边有时候有文字或者图标，但是中间的标题固定居中，大概位置如下，就是内容会变化 -->
<div class="head"><a class="head-left">设置</a>个人中心<a class="head-right">更多</a></div>
<div class="body">
  <section>
    <p>参考文档</p>
    <a href="https://www.cnblogs.com/qdlhj/p/8013172.html">https://www.cnblogs.com/qdlhj/p/8013172.html</a>
  </section>
  <div>
    <p>美化复选框</p>
    <!-- <img src="../img/icon_12.jpg" alt="" /> -->
    <label> <input id="rememberPwdCheck" class="checkbox hidden" type="checkbox" checked="checked" /> <i class="icon icon-checkbox"></i> <span class="rememberPwdtxt">记住账号密码</span> </label>
  </div>

  <div>
    <p>全选</p>
    <div class="allCheck"><input type="checkbox" id="allCheck" class="check hidden" /> <label for="allCheck" class="check-icon">全选</label></div>
  </div>

  <div>
    <dl id="" class="money">
      <dt>选择补偿金额<span class="p_help help">补偿金说明</span></dt>
      <dd>
        <span> <input id="money_type_0" name="money_type" class="selection-rd hidden" type="radio" value="1" checked="" /> <label class="selection-lb" for="money_type_0">10元</label> </span>
        <span> <input id="money_type_1" name="money_type" class="selection-rd hidden" type="radio" value="2" /> <label class="selection-lb" for="money_type_1">20元</label> </span>
        <span> <input id="money_type_2" name="money_type" class="selection-rd hidden" type="radio" value="3" /> <label class="selection-lb" for="money_type_2">50元</label> </span>
      </dd>
    </dl>
  </div>

  <section>
    <p>中间文字，两边横线居中</p>
    <div class="title-center"><div>学生信息</div></div>
  </section>

  <section>
    <p>终极版，rem单位，横线自适应长度</p>
    <div class="flexbox flexbox-middle"><span class="flexchild border-center"></span> <span style="padding:0 .2rem;">我要居中，两边横线对齐</span> <span class="flexchild border-center"></span></div>
  </section>

  <section>
    <p>中间文字，两边横线居中方法2</p>
    <div class="card-title"><span class="text">不辜负你比较快糖果盒如果好</span></div>
  </section>

  <section>
    <p>实现图标水平垂直居中</p>
    <div class="iconA">
      <a> <i class="foot-nav1 icon"></i> <span>首页</span> </a>
    </div>
  </section>

  <section>
    <p>常用表单布局</p>
    <div class="section2">
      <div class="des-title"><span class="text">请认真填写以下信息</span></div>
      <ul>
        <li class="flexbox"><input type="text" placeholder="请输入您的姓名" class="flexchild fill-content" id="tbName2" /></li>
        <li class="flexbox flexbox-middle">
          <span class="fill-label">收货地址:</span>
          <span class="adress" style="overflow: hidden;">
            <input id="provinceCity2" name="rec_address_select" class="txt" placeholder="请选择" readonly="readonly" /> <input id="detailssq2" type="hidden" readonly="readonly" />
            <i class="ui-icon Rmore-icon noborder"></i>
          </span>
        </li>
        <li class="flexbox"><input type="text" placeholder="请填写详细地址" class="flexchild fill-content " id="adressDetail" /></li>
      </ul>
    </div>
  </section>

  <section>
    <li class="flexbox"><label>您的心上人：</label> <input type="text" placeholder="请输入心上人姓名" class="flexchild" id="loveName" /></li>
  </section>

  <section>
    <p>答题进度条</p>
    <div class="recommend-jd">
      <div class="recommend-jd-bg"></div>
      <div class="recommend-jd-ks" style="width: 37.5%;"></div>
      <img src="../img/homepage_04.png" />
    </div>
  </section>

  <section><div class="login-title">让小白鸽知道您不是机器人哦！</div></section>
</div>
<div class="foot">
  <ul>
    <li class="foo"><a class="foot-1">1</a></li>
    <li><a class="foot-2">2</a></li>
    <li><a class="foot-3">3</a></li>
    <li><a class="foot-4">4</a></li>
  </ul>
</div>
